<template>
    <div class="chf-tree">
        <div @click.stop>
            <slot name="search" :treeData="treeData">
                <el-input placeholder="输入关键字进行过滤" v-model="treeData.filterText" style="margin-bottom:10px" clearable v-if="options['filter-node-method']" />
            </slot>
        </div>
        <el-tree v-bind="options" v-on="events" ref="tree">
            <template #default="{ node, data }" v-if="$scopedSlots.default">
                <slot :node="node" :data="data"></slot>
            </template>
        </el-tree>
    </div>
</template>

<script>
export default {
    props: {
        // 基本配置
        options: {
            default () {
                return {}
            },
            type: Object
        },
        //监听事件
        events: {
            default () {
                return {}
            },
            type: Object
        }
    },
    data () {
        return {
            treeData: {
                filterText: ''
            }
        }
    },
    watch: {
        'treeData.filterText' (val) {
            this.$refs.tree.filter(val)
        }
    },
    methods: {
        getRefs () {
            return this.$refs.tree
        }
    }
};
</script>

<style lang="scss" scoped>
.chf-tree {
    // width: 210px;
    height: 100%;
    overflow: scroll;
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
        background: #f0f5ff;
        color: #3587d0;
    }
    ::v-deep .el-tree-node__content {
        padding-right: 10px;
    }
    ::v-deep .el-tree {
        display: inline-block;
        min-width: 100%;
    }
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: white;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(185, 173, 173, 0);
    box-shadow: inset 0 0 1px rgba(185, 173, 173, 0);
    border-radius: 5px;
    background-color: white;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    // -webkit-box-shadow: inset 0 0 6px rgb(251, 255, 249);
    background: #d8d0d0;
}
</style>